const path = require('path');//依赖node的path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件，该插件会在构建时生成index.html文件，而文件中会引入所有的输出文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//输出目录清理插件，这样每次构建会清空输出目录（毕竟每次构建都会重新生成文件，只不过同名文件会覆盖），这样就可以避免一些不必要的残留文件堆积

const VueLoaderPlugin = require('vue-loader/lib/plugin');

//因为extract-text-webpack-plugin不支持webpack4，所以安装时应该指定beta版-->cnpm i --save-dev extract-text-webpack-plugin@next
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  mode: 'production',//生产模式，这样会压缩打包出来的js文件，但是这个参数会被命令行的--mode参数覆盖
	resolve: {
		alias: {
		/* //如果不声明vue模块应该使用vue.esm.js（完整版包含编译器，是将模板语法自动转换成渲染方法的关键）这个文件而非默认的runtime-only，
		那么项目运行起来是报错的，
		另外完整版有vue.js、vue.common.js跟vue.esm.js三个版本，对应不同的模块化标准，本例使用vue.esm.js，是es6的标准*/
			'vue$': 'vue/dist/vue.esm.js'
		}
	},
	plugins: [
		new ExtractTextPlugin('style/index.css'),
		new CleanWebpackPlugin(['dist']),//每次打包前清理dist目录
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "./src/index.html",
			inject: false
		}),
		// 解析.vue文件必须
		new VueLoaderPlugin()
	],
	//使用webpack-dev-server，声明web目录是dist
	devServer: {
		contentBase: "./dist"
	},
	entry: {
		index: './src/script/index.js'//chunkname-->index,
	},
	output: {
		path: path.resolve(__dirname, 'dist'),//输出目录,
		filename: 'script/[name].js',//chunkname.js-->index.js
		//如果需要保证css中指定的背景图片正常访问，则需要配置publicPath，最终图片路径则是publicPath加上file-loader指定的name属性
		//publicPath: 'http://127.0.0.1:8848/vue-learning/dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ExtractTextPlugin.extract({//样式打包到ExtractTextPlugin实例化时指定的文件
					  fallback: 'style-loader',
						use:[
						  'css-loader'
						]
					})
			},
			{
				test: /\.less$/,
				use: ExtractTextPlugin.extract({
					  fallback: 'style-loader',
					  use: [
						  'css-loader',
						  'less-loader'
						]
					})
			},
			{
				//加载element-ui的字体文件
					test: /\.(woff|woff2|eot|ttf|otf)$/,
					use: [
						'url-loader'
					]
			},
			{
					test: /\.vue$/,
					use: [
						'vue-loader'
					]
			},
			{
				test: /\.(png|jpg|gif)$/,
				loader: 'file-loader',
				options: {
					name: 'images/[name].[ext]'//指定图片打包目录
				}
			}
		]
	}
}